<template>
  <Echart v-if="pageFlag" :options="options"></Echart>
  <reacquire v-else @click="getData"/>
</template>

<script>
import reacquire from '../../components/reacquire/reacquire.vue';

export default {
  components: { reacquire },
  data() {
    return {
      pageFlag:false,
      timer:null,
      options:{}
    };
  },
  filters: {
    
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    initChart(){
      this.options = {
        tooltip: {// 提示框配置
          trigger: 'item',  // 触发方式：点击或悬停在元素上
          formatter: params => { // 自定义提示内容格式
            if (params.seriesType === 'scatter') {
              return `${params.name}: ${params.value[2]}`;
            } else if (params.seriesType === 'heatmap') {
              return `强度: ${params.value[2].toFixed(2)}`;
            }
            return `${params.name}: ${params.value}`;
          }
        },
        legend: {// 图例配置
          top: 10,
          left: 'center',
          data: ['省份数据', '热力分布', '城市数据点'],
          textStyle: {
            color: '#333'
          }
        },
        geo: {// 地理坐标系配置（地图基础）
          map: 'china', // 与registerMap里面命名一致
          roam: true, // 允许缩放和平移
          zoom: 1.2,  // 初始缩放比例
          label: {
            show: true, // 显示省份标签
            color: '#555' // 标签颜色
          },
          itemStyle: {
            areaColor: '#f5f5f5', // 地图区域颜色
            borderColor: '#999' // 省份边界颜色
          },
          emphasis: { // 鼠标悬停效果
            itemStyle: {
              areaColor: '#e0f0ff'  // 悬停时区域颜色
            }
          }
        },
        visualMap: [ // 视觉映射配置（数据到颜色的映射）
          {// 第一个视觉映射：用于省份地图数据
            type: 'piecewise',  // 分段型映射
            pieces: [ // 分段规则
              { min: 80, color: '#FF3333' },
              { min: 60, max: 79, color: '#FF6666' },
              { min: 40, max: 59, color: '#FF9999' },
              { min: 20, max: 39, color: '#FFCCCC' },
              { min: 0, max: 19, color: '#FFEEEE' }
            ],
            left: 20,
            top: 'center',
            textStyle: {
              color: '#333'
            },
            // seriesIndex: 0
          },
          {// 第二个视觉映射：用于热力图
            type: 'continuous', // 连续型映射
            min: 0, // 最小值
            max: 100, // 最大值
            calculable: true,// 允许拖拽调整
            show: false,// 不显示控件
            inRange: { // 颜色范围
              color: ['blue', 'cyan', 'green', 'yellow', 'red']
            },
            // seriesIndex: 1
          }
        ],
        series: [
          // 地图数据系列
          // {
          //   name: '省份数据',
          //   type: 'map',
          //   map: 'china',
          //   data: (() => {
          //     // 内部生成模拟数据，不依赖外部方法
          //     const provinces = [
          //       '北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江',
          //       '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南',
          //       '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州',
          //       '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆'
          //     ];
          //     return provinces.map(province => ({
          //       name: province,
          //       value: Math.floor(Math.random() * 100)
          //     }));
          //   })()
          // },
          // 热力图系列
          {
            name: '热力分布',
            type: 'heatmap',
            coordinateSystem: 'geo',// 使用地理坐标系（与geo关联）
            data: (() => {
              // 内部定义城市坐标并生成数据
              const cityCoordinates = {
                北京: [116.4074, 39.9042],
                上海: [121.4737, 31.2304],
                广州: [113.2644, 23.1291],
                深圳: [114.0579, 22.5431],
                杭州: [120.1551, 30.2741],
                南京: [118.7969, 32.0603],
                成都: [104.0665, 30.5723],
                武汉: [114.3055, 30.5928]
              };
              // 为每个城市生成经纬度+随机强度值（0-100）
              return Object.keys(cityCoordinates).map(city => {
                const [lng, lat] = cityCoordinates[city];
                return [lng, lat, Math.random() * 100];
              });
            })(),
            pointSize: 15,  // 热力点大小
            blurSize: 10  // 热力模糊程度
          },
          // 散点图系列
          {
            name: '城市数据点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: (() => {
              // 内部定义城市坐标并生成数据
              const cityCoordinates = {
                重庆: [106.5504, 29.5630],
                西安: [108.9540, 34.2652],
                郑州: [113.6654, 34.7472],
                青岛: [120.3826, 36.0670],
                大连: [121.6146, 38.9145],
                昆明: [102.7183, 25.0453],
                哈尔滨: [126.6370, 45.8038]
              };
              // 为每个城市生成经纬度+随机值（0-999）
              return Object.keys(cityCoordinates).map(city => {
                const [lng, lat] = cityCoordinates[city];
                const value = Math.floor(Math.random() * 1000);
                return {
                  name: city,
                  value: [lng, lat, value]// 格式：[经度, 纬度, 数值]
                };
              });
            })(),
            // 动态计算散点大小
            symbolSize: params => {
              // 检查params.value是否存在且是数组
              if (!params.value || !Array.isArray(params.value)) {
                return 10; // 默认大小
              }
              // 确保数组有第三个元素
              return Math.min(Math.max((params.value[2] || 0) / 30, 5), 20);
            },
            label: {
              show: false,
              formatter: '{b}'
            },
            emphasis: {
              label: {
                show: true
              }
            }
          }
        ]
      };
    },
    getData(){
      this.initChart()
      this.pageFlag=true
      this.switper
    },
    switper(){
      this.timer = setInterval(()=>{
        this.getData()
      },this.$store.state.setting.echartsAutoTime)
    }
  },
};
</script>
<style lang='scss' scoped>

</style>